<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta content="telephone=no" name="format-detection">
	<title>饮食计划</title>
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="./css/common.css">
	<script src="../../../js/jquery-1.8.3.min.js"></script>
	<script src="../../../js/mobile.js"></script>
	<script src="../../../js/md5.js"></script>
	<script src="../../../js/requestHelper.js"></script>
	<!-- 根据额外需求引用fix.js -->
	<script src="./js/fix.js"></script>

	<link rel="stylesheet" href="./css/ksd.css">
</head>
<style>
	html {
		font-size: 625%;
	}

	body {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		background: #fff;
	}

	h2,
	h3,
	h4,
	h5,
	h6 {
		margin: 0;
		padding: 0;
		font-weight: normal;
	}

	.header {
		background: #fff;

		color: #333;
		height: 1.4rem;
		line-height: 1.4rem;

	}

	.home-back {
		margin: .5rem 0 0 .3rem;
		width: .29rem;
		height: .34rem;
		background: url(images/pic3.png);
		background-size: cover;
		float: left;
	}

	.header h2 {
		text-align: center;
		float: left;
		width: 6rem;
		font-size: .34rem;
		font-weight: bold;
	}

	.data {
		border-top: .02rem solid #f5f5f5;
		background: #fff;
		box-shadow: 10px 10px 10px 10px #f3f3f3;
	}

	.data .date-s li {
		font-size: .24rem;
		color: #9c9798;
		padding: .3rem 0 .16rem 0;
	}

	.data .date {
		font-size: .24rem;
		color: #373737;
		padding: .16rem 0 .3rem 0;
	}

	.data .date-s li,
	.data .date li {
		float: left;
		width: .78rem;
		height: .78rem;
		text-align: center;
		margin: 0 .14rem;
		line-height: .78rem;
	}

	.data .date .cur {
		background: #2283e2;
		border-radius: 50%;
		color: #fff;
	}

	.plan {
		background: #fff;
		width: 7.5rem;
		overflow-y: initial;
		height: 100%;
	}

	.plan-content h3 {
		line-height: 0.5rem;
		font-size: .34rem;
		color: #333;
		padding: .6rem .3rem;
	}

	/* .change {
		background: -webkit-linear-gradient(top, rgba(153, 153, 153, 0.1) .2rem, white);
	} */

	.plan-content h3 span {
		color: #bbb;
		font-size: .24rem;
		text-align: right;
		display: block;
		float: right;
	}

	.box .pic {
		width: .83rem;
		height: .83rem;
		margin: 0 .27rem .44rem .33rem;
		border-radius: .08rem;
		float: left;
	}

	.box .pic img {
		border-radius: .08rem;
		width: 100%;
		height: 100%;
	}

	.tit {
		margin-top: .1rem;
		float: left;
	}

	.tit h4 {
		color: #333;
		font-size: .24rem;
	}

	.tit h5 {
		color: #bbb;
		font-size: .2rem;
	}

	.box a {
		font-size: .2rem;
		color: #bbb;
		float: right;
		/* background: url(images/right-icon.png) no-repeat center right; */
		/* padding-right: .4rem; */
		margin-right: .37rem;
		display: block;
	}

	.plan-footer {
		text-align: center;
		border-top: .01rem solid #e6e6e6;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 7.5rem;
		height: .86rem;
		line-height: .86rem;
		font-size: .36rem;
		color: #333;
		background: #fff;
		vertical-align: middle;
	}

	.plan-footer img {
		vertical-align: middle;
		width: .24rem;
		height: .24rem;
		margin: 0 .1rem .1rem;
	}

	.line {
		border-top: .01rem solid #f2f2f2;
	}

	.chk {
		width: .48rem;
		height: .48rem;
		font-size: .24rem;
		display: table-cell;
		vertical-align: middle;
		background-color: rgb(34, 131, 226);
		/* font-family: PingFangSC-Light, sans-serif; */
		color: rgb(254, 254, 254);
		text-align: center;
		border-radius: .5rem;
	}

	.hd {
		width: 100%;
		height: 3.5rem;
	}

	.ft {
		width: 100%;
		height: .86rem;
	}
</style>
<script>
	$(function () {
		var storage = window.localStorage,
			person = JSON.parse(storage.person_info),
			myDate = new Date(),
			today = myDate.getDate(),
			$param = {},
			$data = {},
			date_arr = [];
		real = "http://mobile.unilifemedia.com/uweb/service/v1/ksd/healthy/getWeekDietPlan";
		$data.userId = person.userId;
		$param.data = $data;
		Post(real, $param, function (response) {
			// console.log(response);
			var str = '',
				str1 = '',
				index_day = 0,
				i = 0;
			for (i = 0; i < response.length; i++) {
				var weekDay = response[i].weekDay,
					newWeekDay = weekDay.substr(0, 1),
					date = response[i].date,
					newDate = date.substr(8);
				date_arr.push(newDate);
				str1 += '<li>' + newWeekDay + '</li>';
				str += '<li>' + newDate + '</li>';
			};
			$(".date-s").append(str1 + '<br style="clear:both">');
			$(".date").append(str + '<br style="clear:both">');
			$(".date li")
				.on("click", function (a, mark, c) {
					var val = $.trim($(this).text()), //点击的值
						clone = $(this).clone();
					$(clone).addClass("chk");
					$(this).siblings().css("display", "").next(".chk").remove();;
					$(this).css("display", "none");
					$(this).after(clone);
					index_day = $(this).index();
					if ($.trim($(clone).text()) == today) $(clone).text("今");
					var diet_list = response[index_day].diet;
					if (!mark) {
						show_diet_day(diet_list);
					} //如果是换一批触发的，那么不必调用多次
				})
				.each(function () {
					if ($.trim($(this).text()) == today) {
						index_day = $(this).index();
						$(this).trigger("click"); //默认选中当天
					}
				});
			// var hd = $(".hd").height();
			// $(".plan").css("padding-top", hd/100 + "rem");
			$(".hd>div").css("position", "fixed");
		});

		//换一批
		$(".another").on("click", function () {
			$param = {};
			$data = {};
			$data.userId = person.userId;
			var chk_index = date_arr.indexOf($(".date li.chk").prev().text()),
				today_index = date_arr.indexOf(today.toString()),
				def = chk_index - today_index;
			$data.date = myDate.setDate(myDate.getDate() + def);
			$param.data = $data,
				real = "http://mobile.unilifemedia.com/uweb/service/v1/ksd/healthy/changeDietPlan";
			Post(real, $param, function (res) {
				show_diet_day(res.diet);
			});
		});

		function show_diet_day(diet_list) {
			$(".plan-content").find(".box").remove();
			var lunch = diet_list.lunch,
				dinner = diet_list.dinner,
				breakfast = diet_list.breakfast,
				lunchCalory = diet_list.lunchCalory,
				dinnerCalory = diet_list.dinnerCalory,
				breakfastCalory = diet_list.breakfastCalory,
				arr = [breakfast, lunch, dinner];
			$(".breakfast_div h3 span").text(breakfastCalory + "千卡");
			$(".lunch_div h3 span").text(lunchCalory + "千卡");
			$(".dinner_div h3 span").text(dinnerCalory + "千卡");
			$(arr).each(function (index) {
				for (var z = 0; z < $(this).length; z++) {
					var food_name = $(this)[z].name,
						kcal = $(this)[z].kcal,
						src = $(this)[z].logo,
						name = food_name.split(" "),
						unit = name[1] + (name[2].substr(0, 1)),
						size = name[2].substr(1, 4),
						box =
							`<div class="box"><div class="pic"><img src="${src}"/></div><div class="tit 
					diet_food"><h4 class="Light">${name[0] + size}</h4><h5>${unit}</h5></div><a>${kcal}千卡</a><br style="clear:both"></div>`;
					if (index == 0) {
						$(".breakfast_div").append(box);
					} else if (index == 1) {
						$(".lunch_div").append(box);
					} else {
						$(".dinner_div").append(box);
					}
				}
			});
		};

	})
</script>

<body>
	<div class="hd">
		<div class="upcore-navbar">
			<span class="upcore-navbar-icon-left" onclick="history.back(-1)"></span>
			<span class="upcore-navbar-name-span">饮食计划</span>
			<br style="clear:both">
		</div>
		<div class="data" style="margin-top: 40px">
			<ul class="date-s">
			</ul>
			<ul class="date">
			</ul>
		</div>
	</div>
	<div class="plan">
		<div class="plan-content breakfast_div Regular">
			<h3 class="change">早餐 <span class="Light"> 0千卡</span></h3>
		</div>

		<div class="plan-content lunch_div Regular">
			<h3 class="line">午餐 <span class="Light"> 0千卡</span></h3>
		</div>

		<div class="plan-content dinner_div Regular">
			<h3 class="line">晚餐 <span class="Light"> 0千卡</span></h3>
		</div>
		<div class="ft">
			<div class="plan-footer another Regular">
				<img src="images/change.png">换一批
			</div>
		</div>
	</div>

</body>

</html>